<template>
  <Row :gutter="12" ref="test">
    <Col :span="24"> <WorkbenchHead :totalCount="totalCount" /></Col>
    <Col :span="15"> <PendingCount :count="count" :checkCount="checkCount" /><SystemLog /> </Col>
    <Col :span="9">
      <QuickNav :loading="loading" class="enter-y" style="background-color: #fff" />
      <img
        :src="publicPath + 'work.jpg'"
        style="background-color: #fff; height: 395px; object-fit: contain; width: 100%; display: block; margin: 0 2px"
      />
    </Col>
  </Row>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Row, Col } from 'ant-design-vue';
  import QuickNav from './components/QuickNav.vue';
  import PendingCount from './components/PendingCount.vue';
  import SystemLog from './components/SystemLog.vue';
  import WorkbenchHead from './components/WorkbenchHead.vue';
  // import { pendingBill } from './data';
  import { list } from '../../asset/inventory-manage/InventoryManage.api';
  import { list as approval } from '../../asset/asset-approval/AssetApproval.api';
  const publicPath = import.meta.env.VITE_PUBLIC_PATH || '/';
  const inventoryList = ref([]); // 创建响应式数据
  const count = ref(0);
  const checkCount = ref(0);
  const approvalList = ref([]);
  const loading = ref(true);
  const totalCount = ref(0);
  setTimeout(() => {
    loading.value = false;
  }, 500);
  (async () => {
    // 在组件挂载后调用 API
    try {
      const response = await list({}); // 调用 count API 方法
      const result = await approval({});
      // 将数据赋值给响应式数据 pendingBill
      approvalList.value = result.records;
      checkCount.value = approvalList.value.length;
      inventoryList.value = response.records;
      count.value = inventoryList.value.length;
      totalCount.value = checkCount.value + count.value;
    } catch (error) {
      console.error(error);
    }
  })();
</script>
<style scoped>
  .ant-row {
    padding: 12px;
    overflow-y: hidden;
  }
  .ant-col {
  }
</style>
